<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/9/13 0013
  Time: 20:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>视频管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="table" lay-filter="table">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">视频管理/视频管理</div>
                <div class="layui-card-body">
                    <form class="layui-form" action="" lay-filter="example">

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">视频名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="videoname" name="videoname" placeholder="请输入视频名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>



                            <div class="layui-inline">
                                <label class="layui-form-label">上映时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="videoage" name="videoage" placeholder="请输入上映时间" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <input type="hidden" name="videotypeid" id="videotypeid" value="0">
                                <label class="layui-form-label">视频分类</label>
                                <div class="layui-input-block">
                                    <button class="layui-btn layui-btn-primary videotypeid">
                                        请选择
                                        <i class="layui-icon layui-icon-down layui-font-12">
                                        </i>
                                    </button>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">导演</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="videodirect" name="videodirect" placeholder="请输入导演" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">演员</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="videoactor" name="videoactor" placeholder="请输入演员" autocomplete="off" class="layui-input">
                                </div>
                            </div>



                            <div class="layui-inline">
                                <button type="button" class="layui-btn layuiadmin-btn-list" id="btn-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>



                    </form>

                </div>
            </div>
        </div>
    </div>







</table>



<script type="text/html" id="toolbar">


    <div class="layui-btn-container">

        <button class="layui-btn" lay-event="save">新增</button>
        <button class="layui-btn" lay-event="remove">删除</button>
        <button class="layui-btn" lay-event="update">编辑</button>
        <button class="layui-btn" lay-event="clear">清空</button>
    </div>
</script>






<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script src="${pageContext.request.contextPath}/static/layui.js" charset="utf-8"></script>
</body>
<script>
    //Layui 加载我们的模块  按需加载的玩法
    //Jquery(js工具包)  table dropdown  form  layer(弹出层)   laydate
    layui.use(['form','table','jquery','dropdown','layer','laydate'], function(){


        //初始化这些模块
        var form=layui.form;
        var table=layui.table;
        var $=layui.jquery;
        var dropdown=layui.dropdown;
        var layer=layui.layer;
        var laydate=layui.laydate;

        //构建 使用这些模块的方法
        table.render({
            elem: '#table'  //将页面的某个标签渲染为数据表格
            ,url:'${pageContext.request.contextPath}/admin/video/queryByPage'
            ,toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,method:'post'
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '视频信息列表'
            ,cols: [[
                 {type: 'checkbox', fixed: 'left'}
                ,{field:'videoid', title:'视频ID',hide:true, width:120, fixed: 'left', unresize: true, sort: true}
                ,{field:'videoname', title:'视频名称', width:150}
                ,{field:'videodirect', title:'导演'}
                ,{field:'videoage', title:'上映时间'}
                ,{field:'videolan', title:'语言'}
                ,{field:'videoarea', title:'上映地区'}
                ,{field:'videolength', title:'片长'}
                ,{field:'lastmodifytime', title:'最后更新时间'}
                ,{field:'score', title:'评分'}
            ]]
            ,page: true  //是否需要分页
        });


        //初始化查询函数
        var  pageLoad=function()
        {
            $.get("/admin/videotype/queryByPidAll/1", {}, function (data) {
                //下拉框选择
                const comboxData = data.data;
                comboxData.unshift({'id':0,'title':'请选择'})
                dropdown.render({
                    elem: '.videotypeid'
                    , data: comboxData
                    , click: function (obj) {
                        const element=obj.title.replace('margin-left:20px','');
                        this.elem.html(element+ '   <i class="layui-icon layui-icon-down layui-font-12"></i>');
                        $("#videotypeid").val(obj.id);
                    }
                });
            }, "json");
        }

        pageLoad();


        var inst = dropdown.render({
            elem: '.choose'
            , data: []
            , click: function (obj) {
                const element=obj.title.replace('margin-left:20px','');
                this.elem.html(element+ '   <i class="layui-icon layui-icon-down layui-font-12"></i>');
                $("#typeid").val(obj.id);

            }
        });



        var chooseBind=function(pid) {
            $.get("/admin/videotype/queryByPidAll/1", {}, function (data) {
                //下拉框选择
                const comboxData = data.data;
                inst.reload({
                    data: comboxData
                });
                if(pid!=undefined)
                {
                    var result=comboxData.find(item=>{return item.id==pid});
                    if(result!=undefined) {
                        $('.choose').html(result.title + '   <i class="layui-icon layui-icon-down layui-font-12"></i>');
                        $("#typeid").val(result.id);
                        console.log($("#typeid").val());
                    }
                }
                else
                {
                    $('.choose').html('请选择   <i class="layui-icon layui-icon-down layui-font-12"></i>');
                    $("#typeid").val(0);

                }

            }, "json");
        }

        //条件查询
        $("#btn-search").on('click',function(){
            var videotypeid=$("#videotypeid").val();
            var videoname = $("#videoname").val();
            var videoage = $("#videoage").val();
            var videodirect=$("#videodirect").val();
            var videoactor=$("#videoactor").val();

            table.reload('table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    'videotypeid':videotypeid,
                    'videoname':videoname,
                    'videoage':videoage,
                    'videodirect':videodirect,
                    'videoactor':videoactor
                }
            });


        });






        //监听工具栏的相关事件
        //头工具栏事件
        table.on('toolbar(table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'save':  //新增
                    //清空之前的数据
                    $("#addForm")[0].reset();
                    form.render();
                    $("#videoid").val("0");
                    chooseBind();
                   //弹出一个界面模板
                    layer.open({
                        type: 1,
                        shade: false,
                        title: false, //不显示标题
                        area: ['620px', '480px'], //宽高
                        content: $('#addPanel'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                        cancel: function(){
                            $(".layui-laypage-btn").click();//执行分页刷新当前页
                        }
                    });
                break;
                case 'remove': //删除
                    var data = checkStatus.data;
                    if(data.length<1)
                    {
                        layer.alert("请至少选择一个进行删除");
                        return false;  //阻止后面的动作
                    }
                    //获取要删除的数据
                    //演出一个确定要删除的提示
                    layer.confirm('你确定要删除么', function(index){
                        var videoid=data[0]["videoid"];
                        $.get("/admin/video/remove/"+videoid,{},function(data){
                            if(data.code==0)
                            {
                                layer.close(index);
                                layer.msg(data.msg);
                                //把表格给刷新一下
                                table.reload('table', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });

                            }
                        },"json");
                    });


                    break;
                case 'update': //修改
                    var data = checkStatus.data;
                    if(data.length==1)
                    {
                        var videoid=data[0]["videoid"];
                        //从后台获取到数据  前台要传递一个videoid到后台  返回视频详细信息
                        $.get("/admin/video/querybyid/"+videoid,{},function(pageResult){
                            //将数据填充到Form表单中
                           var obj=pageResult.data[0];
                           form.val("example",obj);
                           chooseBind(obj.typeid);
                            //弹出一个界面模板
                            layer.open({
                                type: 1,
                                shade: false,
                                title: false, //不显示标题
                                area: ['620px', '480px'], //宽高
                                content: $('#addPanel'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                                cancel: function(){
                                    $(".layui-laypage-btn").click();//执行分页刷新当前页
                                }
                            });
                        },"json");




                    }
                    else
                    {
                        layer.alert("只能选择一个进行编辑");
                        return false;  //阻止后面的动作
                    }
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'clear':
                    $.get("/admin/video/clear",{},function(pageResult) {
                        //将数据填充到Form表单中
                       if(pageResult.code==0)
                       {
                           layer.msg(data.msg);
                       }
                    },'json');
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });


        //数据校验
        form.verify();
        //监听提交
        form.on('submit(demo1)', function(data){
          //区分一下  提交的动作是保存还是修改
          const obj=data.field;
          const videoid=obj.videoid;
          const method=videoid==0?'save':'update';
         //我们要完成的工作就是把data.filed的数据传递到后台
         $.post("/admin/video/"+method,data.field,function(data){
             //判断是否提交成功
             if(data.code==0)
             {
                 //把表格给刷新一下
                 table.reload('table', {
                     page: {
                         curr: 1 //重新从第 1 页开始
                     }
                 });
                 //关闭我们的弹出的框
                 layer.closeAll();
                 layer.msg(data.msg);
             }
         },"json");
         //阻止表单跳转
         return false;
        });


    });



</script>

<!--模板begin-->
<div id="addPanel"  style="padding: 10px; background-color: #F2F2F2;display:none">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header"></div>
                <div class="layui-card-body">
                    <form class="layui-form" id="addForm" action="" lay-filter="example">
                        <input type="hidden" name="videoid" id="videoid" value="0">
                        <div class="layui-form-item">
                            <label class="layui-form-label">视频名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="videoname" lay-verify="required" autocomplete="off" placeholder="请输入视频名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">视频别名</label>
                            <div class="layui-input-block">
                                <input type="text" name="videoname2" lay-verify="required" autocomplete="off" placeholder="请输入视频别名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <input type="hidden" name="typeid" id="typeid" value="0">
                            <label class="layui-form-label">所属分类</label>
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-primary choose">

                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">导演</label>
                            <div class="layui-input-block">
                                <input type="text" name="videodirect" lay-verify="required" autocomplete="off" placeholder="请输入导演" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">演员</label>
                            <div class="layui-input-block">
                                <input type="text" name="videoactor" lay-verify="required" autocomplete="off" placeholder="请输入演员" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上映地区</label>
                            <div class="layui-input-block">
                                <input type="text" name="videoarea" lay-verify="required" autocomplete="off" placeholder="请输入上映地区" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上映时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="videoage" lay-verify="required" autocomplete="off" placeholder="请输入上映时间" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">语言</label>
                            <div class="layui-input-block">
                                <input type="text" name="videolan" lay-verify="required" autocomplete="off" placeholder="请输入语言" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">播放地址</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入播放地址" class="layui-textarea" name="playurl"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">下载地址</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入下载地址" class="layui-textarea" name="downlaodurl"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
<!--模板end-->

</html>
